<!--
 * @Author: lp 654528967@qq.com
 * @Date: 2022-06-13 11:34:11
 * @LastEditors: lp 654528967@qq.com
 * @LastEditTime: 2022-06-14 17:23:47
 * @FilePath: \nien-vue3-admin\src\views\selectCompany.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="container">
    <h2 class="title">选择你的公司</h2>
    <span class="describe">你在以下公司中都有担任的角色</span>
    <ul v-loading="loading" class="list-container" @click="selectCompany">
      <li
        v-for="(item,index) in companyList"
        :key="index"
        class="company-list"
        :data-company-id="item.deptId"
      >
        <div>
          {{ item.deptName }}
        </div>
        <el-icon><Right /></el-icon>
      </li>
    </ul>
  </div>
</template>
<script lang='ts' setup>
import { ref } from 'vue'
import { Right } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { queryFactory, companyUpdate } from '@/api/user'
import userStore from '@/store/modules/user'
import { queryRedirect } from '@/utils'

const user = userStore()
const router = useRouter()
const companyList = ref([]), loading = ref(false)
async function getCompany() {
  loading.value = true
  try {
    const res = await queryFactory(user.user.userName)
    if (res.code === 200) {
      companyList.value = res.data
    }
    loading.value = false
  } catch (err) {
    loading.value = false
  }
}
getCompany()
const selectCompany = (e) => {
  try {
    const handle = (e) => {
      const companyId = e.dataset && e.dataset.companyId
      if (companyId) {
        const formData = new FormData()
        formData.append('companyId', companyId)
        companyUpdate(formData).then(res => {
          if (res.code === 200) {
            user.setCompany(companyId)
            ElMessage.success(res.msg)
            console.log(queryRedirect().value)
            
            router.replace({ path: queryRedirect().value || '/index' })
          }
        })
      }
    }
    if (e instanceof HTMLElement) {
      if (e.nodeName.toLocaleLowerCase() === 'li') {
        handle(e)
      } else {
        selectCompany(e.parentNode)
      }
    } else if (e.target.nodeName.toLocaleLowerCase() === 'li') {
      handle(e)
    } else if (e.target.nodeName.toLocaleLowerCase() === 'ul') {
      return false
    } else {
      selectCompany(e.target.parentElement)
    }
  } catch (error) {
    console.log(error, e)
  }
}
</script>
<style lang='less' scoped>
.container {
  // justify-self: self-start;
  height: 100%;
  .title {
    margin-top: 9px;
    font-weight: 700;
  }
  .describe {
    color: #a6a7a8;
    margin-bottom: 9px;
    display: inline-block;
    line-height: 24px;
  }
  .list-container {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .company-list {
    background-color: #f2f2f6;
    margin: 10px 0;
    padding: 5px;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    .el-icon {
      margin-left: 18px;
    }
  }
}

</style>